<template>
  <view class="timetable">
    <view class="header">
      <view class="header-item" v-for="(item,index) in week" :key="item" :style="{ color: todayWeekIndex === index ? '#4070FF' : 'unset' }">{{ item }}</view>
    </view>

    <view class="main">
      <view class="row" v-for="(item,index) in timetableType" :key="index">
        <view class="time-item" >
          <!-- <view class="index">{{ item.index }}</view> -->
          <view class="time">{{ item.start }}</view>
            <view class="time">-</view>
              <view class="time">{{ item.end }}</view>
        </view>
      </view>

      <view class="course-container">
        <view class="week" v-for="(week, weekIndex) in courseData" :key="weekIndex">
          <view class="courseList" v-for="(course, courseIndex) in week" :key="courseIndex">
            <view @click="handleCourseClick(course, weekIndex, courseIndex)" class="course" :style="{ height: (course.length * 80) + 'px', background: course.backgroundColor }" v-if="course.length > 0">{{ course.name }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'Timetable',
    props: {
      timetableType: {
        type: Array,
        default: () => {
          return [
            { index: '1', start: '08:00',end:'08:40' },
            { index: '2', start: '08:50',end:'09:30' },
            { index: '3', start: '09:40',end:'10:20' },
            { index: '4', start: '10:30',end:'11:10' },
            { index: '5', start: '11:20',end:'12:00' },
            { index: '6', start: '14:00',end:'14:40' },
            { index: '7', start: '15:50',end:'16:30' },
            { index: '8', start: '16:40',end:'17:20' },
            { index: '9', start: '17:30',end:'18:10' },
            { index: '10', start: '19:00',end:'19:40' },
            { index: '11', start: '20:50',end:'21:30' },
            { index: '12', start: '21:40',end:'22:20' }
          ]
        }
      },
      week: {
        type: Array,
        default: () => {
          return ['周一', '周二', '周三', '周四', '周五']
        }
      },
      timetables: {
        type: Array,
        default: () => {
          return []
        }
      },
      palette: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data () {
      return {
        allPalette: [...this.palette, '#C4AD8C',]
      }
    },
    computed: {
      courseData () {
        // 为数据标记背景颜色的函数
        let paletteIndex = 0
        const getBackgroundColor = () => {
          const backgroundColor = this.allPalette[paletteIndex]
          paletteIndex++
          if (paletteIndex >= this.allPalette.length) {
            paletteIndex = 0
          }
          return backgroundColor
        }

        // 合并
        const listMerge = []
        this.timetables.forEach(function(list, i) {
        					if (!listMerge[i]) {
        						listMerge[i] = []
        					}
        					list.forEach(function(item, index) {
        						if (!index) {
        							return listMerge[i].push({
        								name: item,
        								length: 1,
        								backgroundColor: item == '' ? 'none' : getBackgroundColor()
        							})
        						}
        						return listMerge[i].push({
        							name: item,
        							length: 1,
        							backgroundColor: item == '' ? 'none' : getBackgroundColor()
        						})
        					})
        				})
        				return listMerge
        // this.timetables.forEach(function (list, i) {
        //   if (!listMerge[i]) {
        //     listMerge[i] = []
        //   }
        //   list.forEach(function (item, index) {
        //     if (!index) {
        //       return listMerge[i].push({ name: item, length: 1, backgroundColor: item === '' ? 'none' : getBackgroundColor() })
        //     }
        //     if (item === (listMerge[i][index - 1] || {}).name && item) {
        //       const sameIndex = (listMerge[i][index - 1] || {}).sameIndex
        //       if (sameIndex || sameIndex === 0) {
        //         listMerge[i][sameIndex].length++
        //         return listMerge[i].push({ name: item, length: 0, sameIndex: sameIndex })
        //       }
        //       listMerge[i][index - 1].length++
        //       return listMerge[i].push({ name: item, length: 0, sameIndex: index - 1 })
        //     } else {
        //       return listMerge[i].push({ name: item, length: 1, backgroundColor: item === '' ? 'none' : getBackgroundColor() })
        //     }
        //   })
        // })
        // return listMerge
      },
      todayWeekIndex () {
        let weekIndex = new Date().getDay() - 1
        if (weekIndex === -1) {
          weekIndex = 6
        }
        return weekIndex
      }
    },
    methods: {
      handleCourseClick (course, weekIndex, courseIndex) {
        const data = {
          index: courseIndex + 1,
          length: course.length,
          week: this.week[weekIndex],
          weekIndex: weekIndex,
          name: course.name
        }
        console.log(`星期${data.week}; 第${data.index}节课; 课程名:${data.name}; 课节:${data.length}`)
        console.log(data)
        this.$emit('courseClick', data)
      }
    }
  }
</script>

<style scoped lang="scss">
.timetable{
  background: white;
  border: 1px solid #E4E7ED;
  // border-radius: 8rpx;

  .header{
    padding-left: 46px;
    height: 56rpx;
    display: flex;
    align-items: center;
    background: #F5F7FA;

    .header-item{
      &:first-child{
        width:46px!important;
      }
      flex: 1;
      text-align: center;
      padding-right: 10px;
    }
  }

  .main{
    position: relative;
    .row{
      height: 80px;
      position: relative;
      &:after{
        content: '';
        height: 0;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        // border-bottom: 1rpx dashed #E4E7ED;
      }

      .time-item{
        height: 100%;
        width: 88rpx;
        text-align: center;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        // background: #F5F7FA;

        .index{
          color: #909399;
          padding-bottom: 8rpx;
          padding-top: 16rpx;
        }
      }
    }

    .course-container{
      position: absolute;
      top: 0;
      left: 88rpx;
      width: calc(100% - 88rpx);
      height: 100%;
      display: flex;

      .week{
        flex: 1;
        width: 0;
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        .courseList{
          word-break: break-all;
          color: white;
          overflow: hidden;

          .course{
            padding: 8px;
            box-sizing: border-box;
            // border-radius: 16rpx;
            text-align: center;
            width: 100%;
            border:1px solid #f5f5f5;
          }
        }
      }
    }
  }
}
</style>
